<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-08 08:40:23
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .layui-card-header {
        border-bottom: none;
    }

    .layui-card.selected {
        background-color: var(--primary-hover-color) !important;
    }

    .layui-card.selected.solid::after {
        border-color: var(--primary-color) !important;
        ;

    }


    .total-map {
        height: calc(100vh - 445px);
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">
            <div class="title-row layuimini-title title-sticky">
                <div class="title-left">
                    <h4> <i class="layui-icon layui-icon-return anticon mr-1 backBtn"></i><span
                            id="pageTitle">出勤范围管理</span>
                    </h4>
                </div>
                <div class="title-right">
                    <span class="title-right-text">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary ml-3 backBtn">取消</button>
                        <button type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="saveBtn">保存</button>
                    </span>
                </div>
            </div>

            <div class="section">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                        <div class="layui-form-item top-label">
                            <div class="layui-form-label ">出勤范围类型</div>
                            <div class="layui-input-block">
                                <input type="text" name="username" lay-verify="required" lay-reqtext="班次名称不能为空"
                                    placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                        <div class="layui-form-item top-label">
                            <div class="layui-form-label required">出勤范围名称</div>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="required" lay-reqtext="班次名称不能为空"
                                    placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <div class="section">
                <div class="view-map">
                    <div class="total-map">
                        <!-- 地图信息 -->
                        <div id="totalMapContainer" class="amap-container"></div>
                        <!-- 全屏/退出全屏 -->
                        <div class="fullscreen" id="onFullscreen">
                            <i class="fullscreen-icon layui-icon layui-icon-screen-full"></i>
                        </div>

                    </div>
                </div>

                <div class="title-row mt-4">
                    <div class="title-left">
                        <div class="title-info">
                            <div class="title-line"></div>
                            <span class="title-text">关联出勤人员</span>
                        </div>
                    </div>
                    <div class="title-right">
                        <button type="submit" class="layui-btn layui-btn-sm">选择关联人员</button>
                    </div>
                </div>

                <div class=" table-stripe">
                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                </div>
            </div>
        </div>




    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            form = layui.form,
            element = layui.element,
            table = layui.table,
            layer = layui.layer,
            util = layui.util,
            miniAMap = layui.miniAMap;
        // 获取存储的数据
        var appData = layui.sessionData('RANGE_PARAMS')
        let { dataDto = null, pageType = '' } = appData
        if (dataDto) {
            dataDto = JSON.parse(dataDto)
        }
        console.log('pageType==', pageType)
        $("#pageTitle").html(pageType == 'edit' ? '编辑出勤范围' : '新增出勤范围')
        console.log('子页面的值===', pageType, dataDto)



        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);
                miniPage.backPageCreate()

            });


            return false;
        });


        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            defaultToolbar: ['filter'],
            cols: [[
                { field: 'sign', minWidth: 100, title: '姓名' },
                { field: 'score', minWidth: 80, title: '岗位' },
                { field: 'time', minWidth: 135, title: '手机号' },
                { field: 'time', minWidth: 135, title: '关联业务类型' },
                { field: 'time', minWidth: 135, title: '所属组织' },
                { field: 'time', minWidth: 135, title: '出勤方式' },
                { title: '操作', minWidth: 100, toolbar: '#currentTableBar', fixed: 'right', align: "center" }

            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            size: 'lg'
        });
        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('.backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/


        // 初始化地图 
        let mapCenter = miniAMap.defaults.mapCenter; // 默认北京中心点
        var map = miniAMap.render({
            containerId: 'totalMapContainer', options: {
                zoom: 14,
                center: mapCenter // 默认北京中心点
            }
        })
        //https://lbs.amap.com/api/javascript-api-v2/documentation#maptype
        map.plugin(["AMap.MapType"], function () {
            //地图类型切换
            var type = new AMap.MapType({
                defaultType: 0,// 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0
                showTraffic: false,//叠加实时交通图层 默认值：false
                showRoad: false,//叠加路网图层 默认值：false

            });
            map.addControl(type);
        });
        setAmapPolygon()

        //获取左侧列表数据
        function setAmapPolygon() {
            $.getJSON("api/workOrderDetail.json", function (json) {
                console.log('json==', json)
                if (json.code === 0) {
                    renderGridCheck(json.data);
                } else {
                    console.error("数据加载失败:", json.msg);
                }
            });
        }



        // 存储多边形对象
        //当前选中
        function renderGridCheck(data) {

            data.lineList.forEach(item => {
                const gridName = item.lineName;
                const color = '#0080FF';
                const points = JSON.parse(item.lineScope); // 解析 lineScope 为数组
                const indexId = `grid_${item.id}`;
                const polygon = miniAMap.createPolyline(points, {
                    color: color
                });
                mapCenter = points[0]
                //重置中心 根据实际需求处理
                map.setCenter(mapCenter); // 仅设置中心

                const line = miniAMap.createPolyline(points, {
                    color: color,
                    zIndex: 20
                });


                const startMarker = miniAMap.createMarker(
                    {
                        position: points[100],
                        iconUrl: miniAMap.defaults.startIconUrl,
                        timeText: ` ${item.actualStart}`,
                        imgWidth: 30,
                        offsetX: -30,
                        offsetY: -50
                    }
                );

                const endMarker = miniAMap.createMarker({
                    position: points[99],
                    iconUrl: miniAMap.defaults.endIconUrl,
                    timeText: ` ${item.actualEnd}`,
                    imgWidth: 30,
                    offsetX: -30,
                    offsetY: -50
                });


                //最终
                const actualStartMarker = miniAMap.createMarker(
                    {
                        position: points[0],
                        iconUrl: miniAMap.defaults.actualStartIconUrl,
                        timeText: ` ${item.actualStart}`,
                        imgWidth: 50,
                        offsetX: -30,
                        offsetY: -50
                    }
                );

                const actualEndMarker = miniAMap.createMarker({
                    position: points[points.length - 1],
                    iconUrl: miniAMap.defaults.actualEndIconUrl,
                    timeText: ` ${item.actualEnd}`,
                    imgWidth: 50,
                    offsetX: -30,
                    offsetY: -50
                });



                map.add([line, actualStartMarker, actualEndMarker, startMarker, endMarker]);

                // 缓存图层实例
                const standardLayer = new AMap.TileLayer();
                const satelliteLayer = new AMap.TileLayer.Satellite();

                // 切换基础图层（标准 / 卫星）
                $('input[name="layer-base-item"]').on('change', function () {
                    if ($(this).is(':checked')) {
                        const layerId = $(this).data('id');
                        map.setFeatures([]);
                        if (layerId === 'AMap.TileLayer') {
                            // map.add(standardLayer);
                            // var selectedCardId = $('.layui-card.solid.selected').attr('id');
                            //重置中心 根据实际需求处理
                            map = miniAMap.initMap('totalMapContainer', {
                                zoom: 14,
                                layers: [//只显示默认图层的时候，layers可以缺省
                                    new AMap.createDefaultLayer()//高德默认标准图层
                                ],
                                center: mapCenter
                            })
                            map.add([line, actualStartMarker, actualEndMarker, startMarker, endMarker]);
                        } else if (layerId === 'AMap.TileLayer.Satellite') {
                            map.add(satelliteLayer);
                        }
                    }
                });



            });
        }




        $('#onFullscreen').on('click', function () {
            miniAMap.onFullscreen(map)
        });


    })
</script>